<template>
  <div class="property-display-container">
    <!-- 顶部选项卡导航 -->
    <div class="property-tabs">
      <div
          v-for="tab in tabs"
          :key="tab.id"
          class="property-tab"
          :class="{ active: activeTab === tab.id }"
          @click="switchTab(tab.id)"
      >
        {{ tab.name }}
        <span v-if="tab.count !== undefined" class="count">({{ tab.count }})</span>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="property-content">
      <!-- 全部图片内容 -->
      <div v-if="activeTab === 'all'" class="tab-content">
        <h2>全部图片({{ allImagesCount }})</h2>
        <div class="image-grid">
          <div
              v-for="(image, index) in allImages"
              :key="'image-'+index"
              class="image-item"
              @click="viewImage(image)"
          >
            <div class="thumbnail-container">
              <img
                  :src="image.url"
                  :alt="image.title"
                  class="thumbnail"
                  loading="lazy"
                  @error="handleImageError"
              />
              <div v-if="image.type === 'vr'" class="vr-badge">
                <el-icon><VideoCamera /></el-icon>
                <span>VR</span>
              </div>
              <div v-else-if="image.type === 'video'" class="play-button">
                <el-icon><VideoPlay /></el-icon>
              </div>
            </div>
            <p class="date">{{ image.date }}</p>
            <p class="title">{{ image.title }}</p>
          </div>
        </div>
      </div>

      <!-- 样板间内容 -->
      <div v-else-if="activeTab === 'sample'" class="tab-content">
        <h2>样板间({{ sampleImages.length }})</h2>
        <div class="image-grid">
          <div
              v-for="(image, index) in sampleImages"
              :key="'sample-'+index"
              class="image-item"
              @click="viewImage(image)"
          >
            <div class="thumbnail-container">
              <img
                  :src="image.url"
                  :alt="image.title"
                  class="thumbnail"
                  loading="lazy"
                  @error="handleImageError"
              />
            </div>
            <p class="date">{{ image.date }}</p>
            <p class="title">{{ image.title }}</p>
          </div>
        </div>
      </div>

      <!-- 位置图内容 -->
      <div v-else-if="activeTab === 'location'" class="tab-content">
        <h2>位置图({{ locationImages.length }})</h2>
        <div class="location-grid">
          <div
              v-for="(image, index) in locationImages"
              :key="'location-'+index"
              class="location-item"
              @click="viewImage(image)"
          >
            <div class="thumbnail-container">
              <img
                  :src="image.url"
                  :alt="image.title"
                  class="thumbnail"
                  loading="lazy"
                  @error="handleImageError"
              />
            </div>
            <p class="date">{{ image.date }}</p>
            <p class="title">{{ image.title }}</p>
          </div>
        </div>
      </div>

      <!-- 楼盘图内容 -->
      <div v-else-if="activeTab === 'building'" class="tab-content">
        <h2>楼盘图({{ buildingImages.length }})</h2>
        <div class="image-grid">
          <div
              v-for="(image, index) in buildingImages"
              :key="'building-'+index"
              class="image-item"
              @click="viewImage(image)"
          >
            <div class="thumbnail-container">
              <img
                  :src="image.url"
                  :alt="image.title"
                  class="thumbnail"
                  loading="lazy"
                  @error="handleImageError"
              />
            </div>
            <p class="date">{{ image.date }}</p>
            <p class="title">{{ image.title }}</p>
          </div>
        </div>
      </div>

      <!-- 沙盘图内容 -->
      <div v-else-if="activeTab === 'model'" class="tab-content">
        <h2>沙盘图({{ modelImages.length }})</h2>
        <div class="image-grid">
          <div
              v-for="(image, index) in modelImages"
              :key="'model-'+index"
              class="image-item"
              @click="viewImage(image)"
          >
            <div class="thumbnail-container">
              <img
                  :src="image.url"
                  :alt="image.title"
                  class="thumbnail"
                  loading="lazy"
                  @error="handleImageError"
              />
            </div>
            <p class="date">{{ image.date }}</p>
            <p class="title">{{ image.title }}</p>
          </div>
        </div>
        <div class="view-more" @click="viewMoreModels">
          <span>更多沙盘图 >></span>
        </div>
      </div>

      <!-- VR看房内容 -->
      <div v-else-if="activeTab === 'vr'" class="tab-content">
        <h2>VR看房({{ vrItems.length }})</h2>
        <div class="vr-grid">
          <div
              v-for="(item, index) in vrItems"
              :key="'vr-'+index"
              class="vr-item"
              @click="openVR(item)"
          >
            <div class="thumbnail-container">
              <img
                  :src="item.thumbnail"
                  :alt="item.title"
                  class="thumbnail"
                  loading="lazy"
                  @error="handleImageError"
              />
              <div class="vr-badge">
                <el-icon><VideoCamera /></el-icon>
                <span>VR</span>
              </div>
            </div>
            <p class="date">{{ item.date }}</p>
            <p class="title">{{ item.title }}</p>
          </div>
        </div>
      </div>

      <!-- 视频内容 -->
      <div v-else-if="activeTab === 'video'" class="tab-content">
        <h2>视频({{ videoItems.length }})</h2>
        <div class="video-grid">
          <div
              v-for="(item, index) in videoItems"
              :key="'video-'+index"
              class="video-item"
              @click="playVideo(item)"
          >
            <div class="thumbnail-container">
              <img
                  :src="item.thumbnail"
                  :alt="item.title"
                  class="thumbnail"
                  loading="lazy"
                  @error="handleImageError"
              />
              <div class="play-button">
                <el-icon><VideoPlay /></el-icon>
              </div>
            </div>
            <p class="date">{{ item.date }}</p>
            <p class="title">{{ item.title }}</p>
          </div>
        </div>
      </div>

      <!-- 其他分类内容 -->
      <div v-else class="tab-content">
        <h2>{{ getActiveTabName() }}</h2>
        <div class="placeholder-content">
          <p>这里是{{ getActiveTabName() }}内容展示区域</p>
        </div>
      </div>
    </div>

    <!-- 图片查看弹窗 -->
    <el-dialog
        v-model="showImageDialog"
        :title="currentImage ? currentImage.title : '图片查看'"
        width="70%"
        top="10vh"
        class="image-dialog"
    >
      <div v-if="currentImage" class="dialog-content">
        <img :src="currentImage.url" class="image-viewer"  alt=""/>
        <div class="info">
          <p><el-icon><Calendar /></el-icon> 拍摄日期: {{ currentImage.date }}</p>
        </div>
      </div>
    </el-dialog>

    <!-- VR看房弹窗 -->
    <el-dialog
        v-model="showVRDialog"
        :title="currentVR ? currentVR.title : 'VR看房'"
        width="90%"
        top="5vh"
        class="vr-dialog"
    >
      <div v-if="currentVR" class="dialog-content">
        <iframe
            :src="currentVR.vrLink"
            frameborder="0"
            allowfullscreen
            class="vr-iframe"
        ></iframe>
        <div class="info">
          <p><el-icon><Calendar /></el-icon> 拍摄日期: {{ currentVR.date }}</p>
        </div>
      </div>
    </el-dialog>

    <!-- 视频播放弹窗 -->
    <el-dialog
        v-model="showVideoDialog"
        :title="currentVideo ? currentVideo.title : '视频播放'"
        width="70%"
        top="10vh"
        class="video-dialog"
    >
      <div v-if="currentVideo" class="dialog-content">
        <video
            :src="currentVideo.videoUrl"
            controls
            autoplay
            class="video-player"
        ></video>
        <div class="info">
          <p><el-icon><Calendar /></el-icon> 拍摄日期: {{ currentVideo.date }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { VideoCamera, VideoPlay, Calendar } from '@element-plus/icons-vue'

// 定义类型
interface PropertyTab {
  id: string
  name: string
  count?: number
}

interface ImageItem {
  id: number
  title: string
  url: string
  date: string
  type: 'image' | 'vr' | 'video'
}

interface VRItem {
  id: number
  title: string
  thumbnail: string
  date: string
  vrLink: string
}

interface VideoItem {
  id: number
  title: string
  thumbnail: string
  date: string
  videoUrl: string
}

// 选项卡数据
const tabs = ref<PropertyTab[]>([
  { id: 'all', name: '全部图片' },
  { id: 'building', name: '楼盘图' },
  { id: 'model', name: '沙盘图' },
  { id: 'sample', name: '样板间'},
  { id: 'location', name: '位置图' },
  { id: 'vr', name: 'VR看房' },
  { id: 'video', name: '视频' }
])

// 样板间数据
const sampleImages = ref<ImageItem[]>([
  {
    id: 1,
    title: '样板图-华西悦湖',
    url: 'https://pic4.ajkimg.com/display/xinfang/d55e38ae7feec8565b2abacea0838a8a/200x150m.jpg',
    date: '2023-09-27',
    type: 'image'
  },
  {
    id: 2,
    title: '样板图-华西悦湖',
    url: 'https://pic4.ajkimg.com/display/xinfang/0877d1a5bf47281d5f185901d5501b89/200x150m.jpg',
    date: '2023-09-27',
    type: 'image'
  },
  {
    id: 3,
    title: '样板图-华西悦湖',
    url: 'https://pic4.ajkimg.com/display/xinfang/7e47499e1c11d90df4c9d8a4c2b54a2e/200x150m.jpg',
    date: '2023-09-27',
    type: 'image'
  }
])

// 位置图数据
const locationImages = ref<ImageItem[]>([
  {
    id: 1,
    title: '位置图-楼盘区位规划',
    url: 'https://pic4.ajkimg.com/display/xinfang/b0d3d1ca0cfdce4b80cc570404029778/200x150m.jpg',
    date: '2023-04-25',
    type: 'image'
  },
  {
    id: 2,
    title: '位置图-楼盘区位规划',
    url: 'https://pic4.ajkimg.com/display/xinfang/aba097c1ffc990ea2469933a400b5cba/200x150m.jpg',
    date: '2023-04-25',
    type: 'image'
  }
])

// 楼盘图数据
const buildingImages = ref<ImageItem[]>([
  {
    id: 1,
    title: '楼盘图-楼盘建筑物外景',
    url: 'https://pic4.ajkimg.com/display/xinfang/12ef0cbe6af07766cc95ce8eae3c8ac8/200x150m.jpg',
    date: '2025-04-22',
    type: 'image'
  },
  {
    id: 2,
    title: '楼盘图-楼盘建筑物外景',
    url: 'https://pic4.ajkimg.com/display/xinfang/1adec8c98f9c54f690e8566777b971fd/200x150m.jpg',
    date: '2024-09-25',
    type: 'image'
  }
])

// 沙盘图数据
const modelImages = ref<ImageItem[]>([
  {
    id: 1,
    title: '沙盘图-规划沙盘',
    url: 'https://pic4.ajkimg.com/display/xinfang/d098ef0c62c7f1fe6806508282ce030a/200x150m.jpg',
    date: '2023-04-25',
    type: 'image'
  },
  {
    id: 2,
    title: '沙盘图-规划沙盘',
    url: 'https://pic4.ajkimg.com/display/xinfang/6b4ae198745d58b8c7e6df24b061bf60/200x150m.jpg',
    date: '2023-04-25',
    type: 'image'
  }
])

// VR看房数据
const vrItems = ref<VRItem[]>([
  {
    id: 1,
    title: '华西悦湖-客厅全景',
    thumbnail: 'https://pic4.ajkimg.com/display/xinfang/f50a1b099351f26c32c1938363dd1e25/180x135.jpg',
    date: '2024-01-28',
    vrLink: 'https://www.3dnest.cn/beyond/play/3beeec80_BGqW_b6f9'
  }
])

// 视频数据
const videoItems = ref<VideoItem[]>([
  {
    id: 1,
    title: '华西悦湖-户外景观',
    thumbnail: 'https://img360.fang.com/2018/10/12/bj/static/4f3572cf68004eb2b9754f50a823aa3a.jpg',
    date: '2023-12-29',
    videoUrl: 'http://hi1grvrcg7xin1ne6w8.exp.bcevod.com/mda-ijbfb1qe0sn587sd/mda-ijbfb1qe0sn587sd.mp4'
  }
])

// 全部图片数据 (包含所有类型的图片)
const allImages = computed(() => [
  ...sampleImages.value,
  ...locationImages.value,
  ...buildingImages.value,
  ...modelImages.value,
  ...vrItems.value.map(vr => ({
    id: vr.id,
    title: vr.title,
    url: vr.thumbnail,
    date: vr.date,
    type: 'vr' as const
  })),
  ...videoItems.value.map(video => ({
    id: video.id,
    title: video.title,
    url: video.thumbnail,
    date: video.date,
    type: 'video' as const
  }))
])

// 全部图片数量
const allImagesCount = computed(() => allImages.value.length)

// 状态管理
const activeTab = ref('all')
const showImageDialog = ref(false)
const showVRDialog = ref(false)
const showVideoDialog = ref(false)
const currentImage = ref<ImageItem | null>(null)
const currentVR = ref<VRItem | null>(null)
const currentVideo = ref<VideoItem | null>(null)

// 获取当前激活的选项卡名称
const getActiveTabName = () => {
  const tab = tabs.value.find(t => t.id === activeTab.value)
  return tab ? tab.name : ''
}

// 切换选项卡
const switchTab = (tabId: string) => {
  activeTab.value = tabId
}

// 查看图片
const viewImage = (image: ImageItem) => {
  if (!image) return

  if (image.type === 'vr') {
    const vrItem = vrItems.value.find(item => item.id === image.id)
    if (vrItem) {
      openVR(vrItem)
    }
  } else if (image.type === 'video') {
    const videoItem = videoItems.value.find(item => item.id === image.id)
    if (videoItem) {
      playVideo(videoItem)
    }
  } else {
    currentImage.value = image
    showImageDialog.value = true
  }
}

// 打开VR
const openVR = (item: VRItem) => {
  if (!item) return

  currentVR.value = item
  showVRDialog.value = true
}

// 播放视频
const playVideo = (item: VideoItem) => {
  if (!item) return

  currentVideo.value = item
  showVideoDialog.value = true
}

// 查看更多沙盘图
const viewMoreModels = () => {
  activeTab.value = 'model'
}

// 图片加载错误处理
const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.src = ''
}
</script>

<style scoped>
.property-display-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 选项卡样式 */
.property-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 15px;
  margin-bottom: 20px;
  scrollbar-width: none;
}

.property-tabs::-webkit-scrollbar {
  display: none;
}

.property-tab {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #f5f5f5;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.property-tab:hover {
  background-color: #e0e0e0;
}

.property-tab.active {
  background-color: #4CAF50;
  color: white;
  font-weight: 500;
}

.count {
  margin-left: 4px;
  font-size: 12px;
  opacity: 0.8;
}

/* 内容区域 */
.property-content {
  min-height: 300px;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.tab-content h2 {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.placeholder-content {
  padding: 40px;
  text-align: center;
  color: #666;
  background-color: #f9f9f9;
  border-radius: 8px;
}

/* 网格布局 */
.image-grid, .location-grid, .vr-grid, .video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* 位置图特殊布局 */
.location-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* 项目卡片样式 */
.image-item, .location-item, .vr-item, .video-item {
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.image-item:hover, .location-item:hover, .vr-item:hover, .video-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.15);
}

.thumbnail-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 4:3 比例 */
  overflow: hidden;
}

.location-item .thumbnail-container {
  padding-bottom: 60%; /* 位置图比例稍宽 */
}

.thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
  background-color: #f5f5f5;
}

.image-item:hover .thumbnail,
.location-item:hover .thumbnail,
.vr-item:hover .thumbnail,
.video-item:hover .thumbnail {
  transform: scale(1.05);
}

/* VR标识 */
.vr-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* 播放按钮 */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-color-primary);
  font-size: 24px;
}

/* 文本信息 */
.date {
  margin: 12px 0 0 12px;
  font-size: 13px;
  color: #999;
}

.title {
  margin: 6px 0 12px 12px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 查看更多 */
.view-more {
  margin-top: 20px;
  text-align: center;
  cursor: pointer;
  color: #4CAF50;
  font-weight: 500;
}

.view-more:hover {
  text-decoration: underline;
}

/* 弹窗样式 */
.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.image-viewer {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
}

.vr-iframe {
  width: 100%;
  height: 70vh;
  border: none;
  border-radius: 8px;
  background-color: #000;
}

.video-player {
  width: 100%;
  border-radius: 8px;
  background-color: #000;
}

.info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .image-grid, .location-grid, .vr-grid, .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
  }

  .property-tabs {
    gap: 8px;
    padding-bottom: 10px;
  }

  .property-tab {
    padding: 6px 12px;
    font-size: 13px;
  }

  .property-content {
    padding: 15px;
  }

  .image-viewer, .vr-iframe {
    height: 50vh;
  }

  .image-dialog, .vr-dialog, .video-dialog {
    width: 95% !important;
  }
}
</style>